<template>
<div>
    <div style="width:100%">
      <div class="page-title" style="width:100%;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><a @click="$router.go(-1)">问题验证</a></el-breadcrumb-item>
          <el-breadcrumb-item>问题详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 问题详情 -->
      <div 
      class="page-content" 
      style="font-size:20px;width:100%;border-top: 1px solid #dddddd;">
        <el-form 
        label-width="150px" 
        :model="problem">
          <el-row  style="padding-bottom:5px">
            <font style="font-size:15px;font-weight:bold">问题详情</font>
          </el-row> 
          <el-row style="padding-top:10px; border-top: 2px solid #dddddd">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="检查人：" style="height:20px">{{problem.checkPerson}}</el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
              <el-form-item label="检查时间：" style="height:20px">{{problem.checkDate}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单位：" style="height:20px">{{problem.parentCompanyName}}</el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
            <el-form-item label="基层单位：" style="height:20px">{{problem.basicCompanyName}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="班组：" style="height:20px">{{problem.companyName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查地点：" style="height:20px">{{problem.checkStation}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="问题描述：" style="height:20px">{{problem.description}}</el-form-item>
        </el-row>
        <el-row>
            <el-form-item label="备注：" style="height:20px">{{problem.note}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="问题类型：">{{problem.problemType}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="问题程度：">{{problem.problemRank}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="问题体系要素：">{{problem.hseFactor}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题原因：" style="height:20px">{{problem.problemSource}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全绩效扣分：" style="height:20px">{{problem.lostScore}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="依据：" style="height:20px">{{problem.problemGist}}</el-form-item>
        </el-row>
        <el-row>
          <el-col :span="12">
          <el-form-item label="责任人" style="height:20px">{{problem.responsePersonName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用工性质：" style="height:20px">{{problem.employmentProperty}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="所在岗位：" style="height:20px">{{problem.workingName}}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岗位工龄：" style="height:20px">{{problem.workingAge}}</el-form-item>
          </el-col>
        </el-row>
         <el-row>
           <el-form-item label="整改责任人：" style="height:20px">{{problem.supervisorName}}</el-form-item>
        </el-row> 
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach1" :alt="problem.checkAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach2" :alt="problem.checkAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="检查图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach3" :alt="problem.checkAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.checkAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.checkAttach4" :alt="problem.checkAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="检查视频：">
              <el-card 
              v-model="problem.checkVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.checkVideo !='' && videoFlag1 == false"
                               :src="problem.checkVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.checkVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>
      <!-- 整改 -->
      <el-row style="padding-bottom:5px">
          <font style="font-size:15px;font-weight:bold">问题整改</font>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否评判教育：" style="height:20px">{{problem.education}}</el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改图片1： ">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach1" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach1" :alt="problem.rectAttach1" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改图片2：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="center" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach2" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach2" :alt="problem.rectAttach2" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="整改图片3：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach3" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach3" :alt="problem.rectAttach3" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="整改图片4：">
              <el-card :body-style="{ padding: '10px' }" style="height:251px;width:90%">
                <el-popover placement="right" title="" trigger="click">
                  <div style="max-width:600px;height:auto"><img :src="problem.rectAttach4" style="max-width:600px;height:auto"/></div>
                  <img slot="reference" :src="problem.rectAttach4" :alt="problem.rectAttach4" style="max-height: 200px">
                </el-popover>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
             <el-form-item label="整改视频：">
              <el-card 
              v-model="problem.rectVideo"
              :show-file-list="false"
              accept='.mp4,.qlv,.qsv,.ogg,.flv,.avi,.wmv,.rmvb'
              :headers="{Authorization:currentUser.token}"
              style="height:251px;width:90%"
              >
              <video v-if="problem.rectVideo !='' && videoFlag1 == false"
                               :src="problem.rectVideo"
                               class="avatar video-avatar"
                               controls="controls">您的浏览器不支持视频播放</video> 
                        <i v-if="problem.rectVideo =='' && videoFlag1 == false"></i>
                    </el-card>
               </el-form-item>
          </el-col>
          </el-row>
          <el-row>
            <el-col>
            <el-form-item label="整改描述：">{{problem.rectDescription}}</el-form-item>
            </el-col>
            <el-col>
            <el-form-item label="相关文件：">
              <el-tooltip class="item" effect="dark" content="点击获取整改文件" placement="right-start">
              <a :href="rectFile" target="_blank">
                <i class="el-icon-document" style="font-size: 30px;"></i>
                </a>
              </el-tooltip>
            </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      <!-- 问题验证 -->
      <el-form 
      label-width="140px" 
      :model="updataForm" 
      :rules="rules" 
      ref="updataForm">
        <el-row style="padding-bottom:5px">
          <font style="font-size:15px;font-weight:bold">问题验证</font>
        </el-row>
        <el-row style="padding-top:5px; border-top: 2px solid #dddddd">
          <el-col :span="12">
            <el-form-item label="验证人："
              v-model="updataForm.verifyPersonName">{{updataForm.verifyPersonName}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="验证时间：">
              <el-date-picker
              v-model="updataForm.verifyDate"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="请选择验证日期"
              style="width:90%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          </el-row>
          <el-row>
          <el-col :span="12">
              <el-form-item label="整改效果" prop="rectEffect">
                <el-select 
                v-model="updataForm.rectEffect" 
                style="width:50%" 
                placeholder="请选择整改效果" 
                clearable
                @change="changeValue">
                  <el-option 
                    v-for="item in rectificationEffectOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name">
                  </el-option>
                </el-select>
              </el-form-item>
          </el-col>
          </el-row>
        <el-row class="buttons">
          <el-form-item>
            <el-button type="primary" @click="verifySubmit('updataForm')">确定</el-button>  
            <el-button type="danger" style="width:100px" @click="$router.go(-1)">取消</el-button>   
          </el-form-item>
        </el-row>
      </el-form>
      </div>
    </div>

    <!-- 指定整改人对话框 -->
    <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    @close="closedDialog">
    <el-form>
      <el-form-item
      label="整改人：">
      <el-select
      v-model="updataForm.supervisorID"
      placeholder="指定整改人"
      style="width:50%" 
      filterable 
      clearable>
      <el-option 
      v-for="item in supervisorOptions"
      :key="item.id"
      :label="`${item.name}`"
      :value="item.employeeID">
      </el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancelSetSupervisor">取 消</el-button>
    <el-button type="primary" @click="setSupervisor">确 定</el-button>
    </span>
    <!--整改人为领导选择审核人-->
   <el-dialog
    append-to-body
    title="整改人为领导，请指定审核人"
    :visible.sync="verifyPersonDialogVisible"
    width="30%">
    <el-form>
      <el-form-item
      label="审核人">
      <el-select
      v-model="updataForm.verifyPersonID"
      placeholder="请指定审核人"
      style="width:50%" 
      filterable 
      clearable>
      <el-option 
      v-for="item in verifyPersonOptions"
      :key="item.id"
      :label="`${item.name}`"
      :value="item.employeeID">
      </el-option>
      </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="cancelSetVerifyPerson">取 消</el-button>
    <el-button type="primary" @click="setVerifyPerson">确 定</el-button>
    </span>
    </el-dialog>
   </el-dialog>
</div>
</template>

<script>
import { GetDictionary } from '../../../services/dictionary';
import {GetCQCheckRecordID,
        GetLoginPersonName,
        CQGetSupervisor,
        UpdateCQAccept,
        CQGetverifyPerson} from '../../../services/cq_problem_acceptance'
import {GetCurrentUser } from '../../../store/CurrentUser'
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

export default {
  data() {
    return {
      client:VueCookies.get("client"),
      updataForm: {
            checkrecordID: '',
            verifyPersonID:'',
            verifyPersonName: "",
            verifyDate: "",
            rectEffect: "",
            status: "",
            supervisorID: '',
            supervisorName: "",
          },
          verifyForm: {
            checkPersonID: '',
            checkPersonName: "",
          },
          rectificationEffectOptions: [],
      problem:{},
    rules:{
        verifyDate :[{type:'date',required: true, message: '请选择验证时间', trigger: ['blur', 'change']}],
        rectEffect :[{required: true, message: '请选择整改效果', trigger: ['blur', 'change'] }],
      },
      //是否展示指定整改人弹框
      dialogVisible: false,
      supervisorOptions: [],
      //整改文件
      rectFile: '',
      companyCode: '',
      verifyPersonDialogVisible:false,
      verifyPersonOptions:[],
      position: '',
      leaderList:[
        '正处级',
        '副处级',
        '科级',
        '正科级',
        '副科级',
        '副总',
      ],
    };
  },
  mounted () {
    this.getCQCheckRrcordDetail()
    this.getLoginPerson()
    this.getTime()
    this.getRectEffect()
    this.changeValue()
    this.setSupervisor()
    this.closedDialog()
    this.getCQverifyPerson()
    this.setVerifyPerson()
    this.submitVerifyData()
  },
  computed:{
    currentUser(){
      return GetCurrentUser()
    }
  },
  methods: {
    //获取当前登录人
      getLoginPerson() {
        GetLoginPersonName().then((res) => {
        //console.log(JSON.stringify(res))
        this.updataForm.verifyPersonID = res.data.employeeID
        this.updataForm.verifyPersonName = res.data.name
        })
      },
    //获取验证时间
    getTime(){
      let showDate = new Date();
      let seperator ='-';
      let year = showDate.getFullYear();
      let month = showDate.getMonth() + 1;
      var strDate = showDate.getDate();
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      if (strDate >= 1 && strDate <= 9) {
          strDate = "0" + strDate;
      }
      this.updataForm.verifyDate = year + seperator + month + seperator + strDate;
    },
     //获取整改结果
      getRectEffect() {
        GetDictionary({name: '整改结果'}).then((res) => {
                this.rectificationEffectOptions = res.data
            }).catch((err) => {
                this.$message.error(err.message)
            })
      },
      changeValue() {
        if(this.updataForm.rectEffect == '不合格'){
          this.dialogVisible = true
          this.getSupervisor()
        }
      },
     //根据problemID获取单个问题详细信息
    getCQCheckRrcordDetail () {
      this.$route.params.id && localStorage.setItem('data',JSON.stringify(this.$route.params.id));
      const id = JSON.parse(localStorage.getItem('data'));
      //console.log(JSON.stringify(id))
      GetCQCheckRecordID(id).then((res) => {
        this.problem = res.data
        //console.log(JSON.stringify(res.data))
        this.updataForm.checkrecordID=this.problem.id
        this.updataForm.status=this.problem.status
        this.verifyForm.checkPersonID = this.problem.checkStaffID
        this.verifyForm.checkPersonName = this.problem.checkPerson
        this.rectFile = this.problem.rectFile
        this.companyCode = this.problem.companyCode
      }).catch((err) => {
        this.$message.error(err.message)
      })
    }, 
    //获取整改人
    getSupervisor() {
      CQGetSupervisor(this.companyCode).then(res => {
        this.supervisorOptions = res.data
        //console.log('res', res)
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 确认指定整改人
    setSupervisor() {
      //console.log(this.supervisorOptions)
      this.supervisorOptions.map(item =>{
        if(this.updataForm.supervisorID == item.employeeID) {
          this.position = item.position
          this.updataForm.supervisorName = item.name.split("(")[0]
          //console.log('position',this.position)
          }
          })
        if(this.leaderList.indexOf(this.position) !== -1) {
          this.updataForm.verifyPersonID = ''
          this.updataForm.verifyPersonName = ''
          //this.updataForm.status = '未审核'
          this.verifyPersonDialogVisible = true
          this.getCQverifyPerson()
        }
      this.dialogVisible = false
    },
    closedDialog() {
      this.dialogVisible = false
    },
    //取消指定
    cancelSetSupervisor() {
      this.updataForm.supervisorID = ''
      this.updataForm.supervisorName = ""
      this.dialogVisible = false
    },
    //提交修改
    verifySubmit (formName) {
      this.$refs[formName].validate((valid) => {
        //console.log(this.updataForm)
        if(this.updataForm.rectEffect == '不合格'){
          this.verifyPersonOptions.map(item =>{
        if(this.updataForm.verifyPersonID == item.employeeID) {
          this.updataForm.verifyPersonName = item.name.split("(")[0]
          }
          })
              //console.log(this.updataForm)
              this.submitVerifyData(valid)
        }
        else{
          this.submitVerifyData(valid)
        }
      })
    },
    //提交验证结果
    submitVerifyData(valid) {
      if (valid) {
          UpdateCQAccept(this.updataForm).then(() => {
            //console.log(this.updataForm)
            this.$message.success('操作成功')
            this.$router.go(-1) //返回上一url
          }, (err) => {
            this.$message.error(err.message)
          })
        }
         else {
          //console.log('error submit!!');
          return false;
        }
    },
    //获取审核人
    getCQverifyPerson() {
      this.updataForm.verifyPersonID = ''
      CQGetverifyPerson().then((res) => {
        this.verifyPersonOptions = res.data
        //console.log(res.data)
      })
    },
    cancelSetVerifyPerson() {
      this.verifyPersonDialogVisible = false
    },
    setVerifyPerson() {
      this.verifyPersonDialogVisible = false
    },
  }
};
</script>

<style>
#main{
  width:1000px;
  height: 100%;
  margin-left: 2%;
  margin-right: 5%;
}
.above{
margin-top: 20px;
width: 1000px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 30px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: buttom;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 400px;
  height: 200px;
}
</style>
